<template>
	<view class="about-container">
	  <view class="header-section">
		<view class="title-box">
		  <uni-title type="h2" title="我的班前工作报告"></uni-title>
		  <view class="subtitle">查看您的班前报告记录（仅显示班前报告）</view>
		</view>
	  </view>

	  <!-- 添加新报告按钮 -->
	  <view class="add-section">
		<button class="add-btn" @click="showAddModal">
		  <uni-icons type="plus" size="20" color="#fff"></uni-icons>
		  <text>添加新报告</text>
		</button>
	  </view>
  
	  <!-- 历史记录列表 - 在编辑模式下隐藏 -->
	  <view class="performance-list" v-if="!isEdit">
		<view v-if="loading" class="loading">
		  <uni-icons type="spinner-cycle" size="24" color="#409EFF"></uni-icons>
		  <text>加载中...</text>
		</view>
		<view v-else-if="performanceList.length === 0" class="no-data">
		  <uni-icons type="info" size="24" color="#909399"></uni-icons>
		  <text>暂无班前报告数据</text>
		</view>
		<view v-else class="performance-item" v-for="(item, index) in performanceList" :key="index" :style="{ animationDelay: index * 0.1 + 's' }">
		  <view class="item-header">
			<view class="employee-info">
			  <text class="employee-id">名称：{{ item.userName }}</text>
			  <text class="date">{{ item.aa }}</text>
			</view>
			<view class="report-section">
			  <view class="report-header">
				<text class="unit">班前报告</text>
				<view class="action-buttons">
				  <button class="edit-btn" size="mini" @click="handleEdit(item)">编辑</button>
				</view>
			  </view>
			  <view class="report-content" v-if="item.bb">
				<text class="value">{{ item.bb }}</text>
			  </view>
			  <view class="report-content empty" v-else>
				<text class="value">暂无报告</text>
			  </view>
			</view>
		  </view>
		  <!-- 操作按钮区域 -->
		  <view class="item-actions">
			<button class="view-detail-btn" @click="handleViewDetail(item)">
			  <uni-icons type="eye" size="16" color="#fff"></uni-icons>
			  <text>查看详情</text>
			</button>
		  </view>
		</view>
	  </view>
	  
	  <!-- 编辑弹窗 -->
	  <uni-popup ref="editPopup" type="center" :mask-click="false">
	  <view class="popup-content">
		<view class="popup-header">
		  <text class="popup-title">{{ isEdit ? '编辑报告' : '添加报告' }}</text>
		  <uni-icons type="close" size="24" color="#909399" @click="closeEditModal"></uni-icons>
		</view>
		
		<view class="popup-body">
		  <view class="form-item">
			<text class="label">日期</text>
			<picker mode="date" :value="form.aa" @change="onDateChange">
			  <view class="picker-value">{{ form.aa || '请选择日期' }}</view>
			</picker>
		  </view>
		  
		  <view class="report-section floor-section">
			<view class="section-title">楼面部</view>
					  <textarea 
			class="report-input" 
			v-model="form.floorReport" 
			placeholder="请输入楼面部报告内容"
			:maxlength="500"
			show-confirm-bar="false"
			:adjust-position="true"
			:cursor-spacing="20"
		  ></textarea>
		  <view class="word-count">{{ form.floorReport.length }}/500</view>
		  </view>
		  
		  <view class="report-section business-section">
			<view class="section-title">业务部</view>
					  <textarea 
			class="report-input" 
			v-model="form.businessReport" 
			placeholder="请输入业务部报告内容"
			:maxlength="500"
			show-confirm-bar="false"
			:adjust-position="true"
			:cursor-spacing="20"
		  ></textarea>
		  <view class="word-count">{{ form.businessReport.length }}/500</view>
		  </view>

		  <view class="report-section dj-section">
			<view class="section-title">DJ部</view>
					  <textarea 
			class="report-input" 
			v-model="form.djReport" 
			placeholder="请输入DJ部报告内容"
			:maxlength="500"
			show-confirm-bar="false"
			:adjust-position="true"
			:cursor-spacing="20"
		  ></textarea>
		  <view class="word-count">{{ form.djReport.length }}/500</view>
		  </view>


		  <view class="report-section dj-section">
			<view class="section-title">占位</view>
					  <textarea 
			class="report-input" 
			
			placeholder="用于占位不用输入"
			:maxlength="500"
			show-confirm-bar="false"
			:adjust-position="true"
			:cursor-spacing="20"
		  ></textarea>
		  <view class="word-count">{{ form.djReport.length }}/500</view>
		  </view>
		</view>
  
		<view class="popup-footer">
		  <button class="cancel-btn" @click="closeEditModal">取消</button>
		  <button class="confirm-btn" @click="handleSubmit">{{ isEdit ? '修改' : '提交' }}</button>
		</view>
	  </view>
	</uni-popup>
	</view>
  </template>
  
  <script>
  import { listYeji, addYeji, updateYeji } from '@/api/system/yeji'
  
  export default {
	// 页面配置
	onPullDownRefresh() {
	  this.getUserPerformance().finally(() => {
		uni.stopPullDownRefresh();
	  });
	},
	data() {
	  return {
		loading: false,
		performanceList: [],
		queryParams: {
		  pageNum: 1,
		  pageSize: 10,
		  userId: null
		},
		form: {
		  aa: '',
		  floorReport: '',
		  businessReport: '',
		  djReport: '',
		  bb: '',
		  userId: null
		},
		isEdit: false,
		editId: null,
		editingSection: null // 当前正在编辑的部门
	  }
	},
	computed: {
		formattedDate() {
			return this.form.aa ? new Date(this.form.aa).toLocaleDateString() : ''
		}
	},
	onLoad() {
	  this.getUserPerformance()
	},
	methods: {
	  getUserPerformance() {
		// 从本地存储获取用户信息
		const userInfo = uni.getStorageSync('userInfo')
		if (userInfo && userInfo.user) {
		  this.queryParams.userId = userInfo.user.userId
		  this.form.userId = userInfo.user.userId
		  this.loading = true
		  
		  listYeji(this.queryParams).then(res => {
			if (res.code === 200) {
			  // 过滤出班前报告（bb字段有值的记录），并按时间倒序排列
			  const banqianReports = res.rows.filter(item => item.bb && item.bb.trim() !== '')
			  this.performanceList = banqianReports.reverse()
			} else {
			  this.$modal.msgError(res.msg || '获取数据失败')
			}
		  }).catch(err => {
			console.error('获取数据失败：', err)
			this.$modal.msgError('获取数据失败')
		  }).finally(() => {
			this.loading = false
		  })
		} else {
		  this.$modal.msgError('未获取到用户信息')
		}
	  },
	  onDateChange(e) {
		this.form.aa = e.detail.value
	  },
	  // 显示添加弹窗
	  showAddModal() {
		this.isEdit = false
		this.resetForm()
		this.form.aa = new Date().toISOString().split('T')[0] // 默认今天
		this.$refs.editPopup.open()
	  },
	  // 关闭编辑弹窗
	  closeEditModal() {
		this.$refs.editPopup.close()
		this.resetForm()
	  },

	  // 查看报告详情
	  handleViewDetail(item) {
		// 跳转到详情页面，传递报告数据
		uni.navigateTo({
		  url: `/pages/mine/banqian/deptDetail/deptDetail?reportData=${encodeURIComponent(JSON.stringify(item))}`
		})
	  },
	  handleEdit(item) {
		this.isEdit = true
		this.editId = item.id
		this.form.aa = item.aa
		
		// 解析历史报告内容
		if (item.bb) {
			const content = item.bb
			// 尝试匹配各个部门的内容
			const floorMatch = content.match(/楼面部：([\s\S]*?)(?=业务部：|DJ部：|$)/)
			const businessMatch = content.match(/业务部：([\s\S]*?)(?=DJ部：|$)/)
			const djMatch = content.match(/DJ部：([\s\S]*?)$/)
			
			// 提取内容，如果没有匹配到则设为空字符串
			this.form.floorReport = floorMatch ? floorMatch[1].trim() : ''
			this.form.businessReport = businessMatch ? businessMatch[1].trim() : ''
			this.form.djReport = djMatch ? djMatch[1].trim() : ''
		} else {
			this.form.floorReport = ''
			this.form.businessReport = ''
			this.form.djReport = ''
		}
		
		// 保存原始内容
		this.form.bb = item.bb
		
		// 打开编辑弹窗
		this.$refs.editPopup.open()
	  },
	  resetForm() {
		this.form.aa = ''
		this.form.floorReport = ''
		this.form.businessReport = ''
		this.form.djReport = ''
		this.form.bb = ''
		this.isEdit = false
		this.editId = null
		this.editingSection = null
	  },
	  handleSubmit() {
		if (!this.form.aa) {
		  this.$modal.msgError('请选择日期')
		  return
		}
		if (!this.form.floorReport && !this.form.businessReport && !this.form.djReport) {
		  this.$modal.msgError('请至少填写一个部门的报告内容')
		  return
		}

		// 合并内容
		this.form.bb = `楼面部：${this.form.floorReport}\n业务部：${this.form.businessReport}\nDJ部：${this.form.djReport}`
		
		// 检查合并后的内容长度（限制在3000字符以内，为数据库字段留出安全余量）
		if (this.form.bb.length > 3000) {
		  this.$modal.msgError('报告内容过长，请精简内容后重新提交')
		  return
		}

		const submitData = {
		  ...this.form,
		  id: this.isEdit ? this.editId : undefined
		}

		const submitMethod = this.isEdit ? updateYeji : addYeji

		submitMethod(submitData).then(res => {
		  if (res.code === 200) {
			this.$modal.msgSuccess(this.isEdit ? '修改成功' : '提交成功')
			this.closeEditModal()
			this.getUserPerformance()
		  } else {
			this.$modal.msgError(res.msg || '操作失败')
		  }
		}).catch(err => {
		  console.error('操作失败：', err)
		  this.$modal.msgError('操作失败')
		})
	  }
	}
  }
  </script>
  
  <style lang="scss" scoped>
  page {
	background-color: #f5f7fa;
  }
  
  .about-container {
	padding: 30rpx;
	min-height: 100vh;
  }
  
  .header-section {
	margin-bottom: 40rpx;
	
	.title-box {
	  text-align: center;
	  padding: 20rpx 0;
	  
	  .subtitle {
		color: #909399;
		font-size: 28rpx;
		margin-top: 10rpx;
	  }
	}
  }
  
  .add-section {
	margin-bottom: 30rpx;
	
	.add-btn {
	  width: 100%;
	  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
	  color: #fff;
	  border: none;
	  border-radius: 16rpx;
	  padding: 30rpx 0;
	  font-size: 32rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 20rpx;
	  box-shadow: 0 8rpx 30rpx rgba(64, 158, 255, 0.3);
	  transition: all 0.3s ease;
	  
	  &:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 15rpx rgba(64, 158, 255, 0.3);
	  }
	}
  }
  
  /* 弹窗样式 */
  .popup-content {
	background: #fff;
	border-radius: 20rpx;
	width: 90vw;
	max-width: 600rpx;
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	
	.popup-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30rpx;
	  border-bottom: 2rpx solid #f0f0f0;
	  
	  .popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #303133;
	  }
	}
	
	.popup-body {
	  flex: 1;
	  padding: 30rpx;
	  overflow-y: auto;
	  max-height: 60vh;
	  
	  .form-item {
		margin-bottom: 30rpx;
		
		.label {
		  display: block;
		  font-size: 28rpx;
		  color: #303133;
		  margin-bottom: 15rpx;
		  font-weight: 500;
		}
		
		.picker-value {
		  padding: 20rpx;
		  background: #f8f9fa;
		  border-radius: 8rpx;
		  font-size: 28rpx;
		  color: #303133;
		  border: 2rpx solid #e4e7ed;
		}
	  }
	  
	  .report-section {
		margin-bottom: 30rpx;
		padding: 20rpx;
		border: 2rpx solid #e4e7ed;
		border-radius: 12rpx;
		background-color: #fff;
		
		.section-title {
		  font-size: 30rpx;
		  font-weight: bold;
		  color: #333;
		  margin-bottom: 20rpx;
		  padding-bottom: 16rpx;
		  border-bottom: 2rpx solid #e4e7ed;
		}
		
		.report-input {
		  width: 100%;
		  height: 250rpx;
		  padding: 20rpx;
		  background-color: #f8f9fa;
		  border: 2rpx solid #dcdfe6;
		  border-radius: 8rpx;
		  font-size: 28rpx;
		  box-sizing: border-box;
		  resize: none;
		  line-height: 1.5;
		  
		  &:focus {
			border-color: #409eff;
			background-color: #fff;
		  }
		}
		
		.word-count {
		  text-align: right;
		  font-size: 24rpx;
		  color: #909399;
		  margin-top: 10rpx;
		}
		
		/* 楼面部样式 */
		&.floor-section {
		  border-color: #409eff;
		  .section-title {
			color: #409eff;
			border-bottom-color: #409eff;
		  }
		}
		
		/* 业务部样式 */
		&.business-section {
		  border-color: #e6a23c;
		  .section-title {
			color: #e6a23c;
			border-bottom-color: #e6a23c;
		  }
		}
		
		/* DJ部特殊样式 */
		&.dj-section {
		  border-color: #67c23a;
		  .section-title {
			color: #67c23a;
			border-bottom-color: #67c23a;
		  }
		  
		  .report-input {
			height: 280rpx;
		  }
		}
	  }
	}
	
	.popup-footer {
	  display: flex;
	  gap: 20rpx;
	  padding: 30rpx;
	  border-top: 2rpx solid #f0f0f0;
	  
	  .cancel-btn, .confirm-btn {
		flex: 1;
		padding: 20rpx 0;
		border-radius: 10rpx;
		font-size: 30rpx;
		border: none;
	  }
	  
	  .cancel-btn {
		background: #f5f7fa;
		color: #606266;
		
		&:active {
		  background: #e4e7ed;
		}
	  }
	  
	  .confirm-btn {
		background: #409EFF;
		color: #fff;
		
		&:active {
		  background: #337ecc;
		}
	  }
	}
  }
  
  .report-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;

	.action-buttons {
	  .edit-btn {
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		background: linear-gradient(135deg, #E6A23C 0%, #F56C6C 100%);
		color: #fff;
		border-radius: 8rpx;
		border: none;
		line-height: 1.5;
		box-shadow: 0 2rpx 8rpx rgba(230, 162, 60, 0.3);
		transition: all 0.3s ease;
		
		&:active {
		  transform: translateY(1rpx);
		  box-shadow: 0 1rpx 4rpx rgba(230, 162, 60, 0.3);
		}
	  }
	}
  }
  
  .performance-list {
	.loading, .no-data {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 60rpx 0;
	  color: #909399;
	  font-size: 28rpx;
	  
	  .uni-icons {
		margin-bottom: 20rpx;
	  }
	}
	
	.performance-item {
	  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	  border-radius: 16rpx;
	  padding: 30rpx;
	  margin-bottom: 30rpx;
	  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
	  transform: translateY(0);
	  transition: all 0.3s ease;
	  animation: slideIn 0.5s ease forwards;
	  opacity: 0;
	  
	  .item-header {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		
		.employee-info {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  
		  .employee-id {
			color: #303133;
			font-size: 30rpx;
			font-weight: 500;
		  }
		  
		  .date {
			color: #909399;
			font-size: 26rpx;
		  }
		}
		
		.report-section {
		  display: flex;
		  flex-direction: column;
		  gap: 10rpx;
		  
		  .unit {
			font-size: 28rpx;
			color: #666;
			font-weight: bold;
		  }
		  
		  .report-content {
			background: #f8f9fa;
			border-radius: 12rpx;
			padding: 20rpx;
			max-height: 200rpx;
			overflow-y: auto;
			
			&.empty {
			  background: #f5f7fa;
			  .value {
				color: #909399;
			  }
			}
			
			.value {
			  font-size: 28rpx;
			  color: #333;
			  line-height: 1.6;
			  white-space: pre-wrap;
			  word-break: break-all;
			}
			
			&::-webkit-scrollbar {
			  width: 6rpx;
			}
			
			&::-webkit-scrollbar-thumb {
			  background-color: #dcdfe6;
			  border-radius: 3rpx;
			}
			
			&::-webkit-scrollbar-track {
			  background-color: #f5f7fa;
			}
		  }
		}
	  }
	  
	  // 操作按钮区域
	  .item-actions {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		
			.view-detail-btn {
	  background: linear-gradient(135deg, #409EFF 0%, #67C23A 100%);
	  color: #fff;
	  border: none;
	  border-radius: 6rpx;
	  padding: 8rpx 16rpx;
	  font-size: 22rpx;
	  display: flex;
	  align-items: center;
	  gap: 6rpx;
	  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
	  transition: all 0.3s ease;
	  
	  &:active {
		transform: translateY(1rpx);
		box-shadow: 0 1rpx 4rpx rgba(64, 158, 255, 0.3);
	  }
	  
	  text {
		font-weight: 500;
	  }
	}
	  }
	}
  }
  
  @keyframes slideIn {
	from {
	  opacity: 0;
	  transform: translateY(20rpx);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  </style>
  